import React from 'react'
import { Button, Input, Row, Col, Form } from 'antd'
const Search = Input.Search;
import Location from 'components/location'
const FormItem = Form.Item;

export default {
  key: 'location',
  name: 'Location 地点选择器',
  author: '张然',
  description: '使用了腾讯地图，全国地点的关键字搜索选择框。',
  isExampleFull: false,
  api: [
    {
      title: 'API',
      data: [{
        param: 'disabled', description: '是否禁用。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'onChange', description: '选择值时发生的回调。', type: 'function(result)', defaultValue: '-'
      },{
        param: 'value', description: '组件的值，值应为包含::address::、::longitude::、::latitude::的JSON字符串。', type: 'JSON', defaultValue: '-'
      }],
      description: ''
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '输入关键字搜索地点。',
      state: {

      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div>
            <Location onChange={context.handleChange}/>
          </div>
        )
      }
    },
    {
      title: '默认值与禁用',
      description: '值为一个JSON字符串，必须包含::address::、::longitude::、::latitude::属性，可以不是腾讯地图集中的地点。',
      state: {
        value: JSON.stringify({
          address: '随便起的地名',
          longitude: 120,
          latitude: 120
        })
      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value);
            context.setState({ value });
          }
        }
      },
      getContent: context => {
        const { value } = context.state;
        return (
          <div>
            <Location onChange={context.handleChange} value={value}/>
            <br/>
            <Location disabled/>
          </div>
        )
      }
    },
    {
      title: '兼容antd的表单',
      description: '本组件可用于antd的::Form::组件中，使用::getFieldDecorator::包裹即可与antd表单一同使用。',
      state: {},
      getMethod: context => {
        return {
          handleSubmit: e => {
            e.preventDefault();
            context.props.form.validateFieldsAndScroll((err, values) => {
              if (!err) {
                console.log('Received values of form: ', values);
              }
            });
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        const { getFieldDecorator } = context.props.form;
        return (
          <Form onSubmit={context.handleSubmit}>
            <FormItem label='地点' style={{ marginBottom: 12 }}>
              {getFieldDecorator('location', {
                rules: [{
                  required: true,
                  message: '请输入'
                }]
              })(
                <Location />
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">提交</Button>
            </FormItem>
          </Form>
        )
      }
    }
  ]
}
